<template>
    <div class="full-h">
        <div style="padding:20px" class="full-w flex-center">
            <div class="engine-icon" @click="visible=!visible" v-if="appStore.islandStoreData[islandName]">
                <img :src="CheckFullUrl(appStore.islandStoreData[islandName].icon)" 
                :alt="appStore.islandStoreData[islandName].label">
            </div>
            <div class="input-search">
                <el-icon><Search /></el-icon>
                <input type="text" v-model="searchValue" placeholder="搜索" @keyup.enter="search">
            </div>
        </div>
        <transition name="engine">
            <!-- <div class="engine-content" v-if="visible"> -->
                <ul class="flex-center flex-warp engine-content" v-if="visible">
                    <li v-for="item in searchEngine" :key="item.value" 
                    @click="handleSelect(item)"
                    class="engine-item flex-column-center">
                        <div class="engine-icon">
                            <img :src="CheckFullUrl(item.icon)">
                        </div>
                        <p>{{item.label}}</p>
                    </li>
                </ul>
            <!-- </div> -->
        </transition>
    </div>
</template>
  
<script lang='ts'>
import { onMounted, reactive, ref, toRefs } from 'vue';
import useCheck from '@/hooks/useCheck';
import cache from '@/utils/cache';
import { useAppStore } from '@/store/app';
export default {
    name:'xpSearch',
    props: {

    },
    components: {
    },
    emits:[],
    setup (props, context) 
    {
        const appStore = useAppStore();
        let data = reactive({
            islandName:'searchIsland',
            searchValue:'',
            visible:false,
            searchEngine:[
                {
                    value:0,
                    label:'百度',
                    icon:'/icon/baidu.svg',
                    url:'https://www.baidu.com/s?wd='
                },
                {
                    value:1,
                    label:'谷歌',
                    icon:'/icon/google.svg',
                    url:'https://www.google.com/search?q='
                },
                {
                    value:2,
                    label:'必应',
                    icon:'/icon/bing.svg',
                    url:'https://cn.bing.com/search?q='
                },
                {
                    value:3,
                    label:'搜狗',
                    icon:'/icon/sougou.svg',
                    url:'https://www.sogou.com/web?query='
                }
            ]
        });
        let methods = {
            search ()
            {
                let searchLink = appStore.islandStoreData[data.islandName].url + data.searchValue;
                window.open(searchLink, '_blank');
            },
            handleSelect (item)
            {
                appStore.islandStoreData[data.islandName] = item;
                cache.islandStoreData.set(JSON.stringify(appStore.islandStoreData));
                data.visible = false;
            },
            init ()
            {
                if (cache.islandStoreData.get())
                {
                    let value = JSON.parse(cache.islandStoreData.get());
                    appStore.islandStoreData[data.islandName] = value[data.islandName];
                    return;
                }
                appStore.islandStoreData[data.islandName] = data.searchEngine[0];
                cache.islandStoreData.set(JSON.stringify(appStore.islandStoreData));
            }
        };
        onMounted(() => 
        {
            methods.init();
        });
        return { 
            ...toRefs(data),
            ...methods,
            ...useCheck(),
            appStore
        };
    }
};
</script>
  
<style scoped lang="scss">

@keyframes engineHide {
    0% {
        display: block;
        // height: auto;
        opacity: 1;
    }
    60% {
        height: 60px;
        opacity: .6;
    }
    80% {
        height: 20px;
        opacity: .3;
    }
    100% {
        display: none;
        opacity: 0;
        height: 0px;
    }
}
  
@keyframes engineShow {
    0% {
        display: none;
        height: 0px;
        opacity: 0;
    }
    60% {
        height: 20px;
        transform: scaleY(1.06);
    }
    80% {
        height: 60px;
        transform: scaleY(1);
        opacity: 1;
    }
    100% {
        height: auto;
        display: block;
    }
}
.engine-icon {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: $ShadowColor;
    overflow: hidden;
    // box-shadow: 0 0 5px #0000001a;
    cursor: pointer;
    transition: all .2s;
    padding: 8px;
    margin: 5px 10px 5px 0;
    min-width: 40px;

    &:hover {
        background-color: var(--el-bg-color-tool);
    }
}

.engine-content {
    margin: 0px 20px;
    border-radius: 5px;
    background-color: var(--el-bg-color-tool);

    .engine-item {
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        transition: all .2s;
        cursor: pointer;

        p {
            margin-top: 5px;
            font-size: 14px;
        }

        .engine-icon {
            margin: 0;
        }

        &:hover {
            background-color:$ShadowColor;
        }
    }
}

.engine-enter-active {
    animation: engineShow .35s ease-in-out 0s forwards;
}

.engine-leave-active {
    animation: engineHide .35s ease-in-out 0s forwards;
}
</style>
  